<template>
  <div class="page-banner-add">
    <n-form ref="formRef" :model="model" :rules="rules">
      <n-form-item label="Alt" path="alt">
        <n-input v-model:value="model.alt" placeholder="请输入alt" />
      </n-form-item>

      <n-form-item label="Link" path="link">
        <n-input v-model:value="model.link" placeholder="请输入link" />
      </n-form-item>

      <n-form-item label="Img" path="img">
        <n-upload
          action="http://localhost:3001/admin/file/upload"
          name="hello"
          list-type="image-card"
          :max="1"
          @finish="handleFinish"
        >
          点击上传
        </n-upload>
      </n-form-item>

      <n-form-item>
        <n-button type="primary" @click="handleClick">确认</n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script>
import { addBanner } from "@/api/banner";

export default {
  data() {
    return {
      model: {
        alt: "",
        link: "",
        img: "",
      },
      rules: {
        alt: [{ required: true, message: "请输入Alt", trigger: "blur" }],
        link: [{ required: true, message: "请输入Link", trigger: "blur" }],
        img: [{ required: true, message: "请上传Img", trigger: "blur" }],
      },
    };
  },

  methods: {
    handleFinish({ event }) {
      // 获取后台接口返回的图片访问地址
      this.model.img = event.target.response
    },

    async handleClick() {
      // 1. 表单校验
      await this.$refs.formRef.validate();
      // 2. 调用接口
      await addBanner(this.model);
      // 3. 成功
      this.$message.success("新增成功");
    },
  },
};
</script>
